<template>
  <div class="">
    <el-menu
      :collapse="props.collapse"
      router
      :default-active="active"
      @select="(...args) => $emit('select', ...args)"
    >
      <el-menu-item
        index="home"
        :route="{
          path: '/',
        }"
      >
        <el-icon size="20">
          <icon name="material-symbols:home"></icon>
        </el-icon>
        <span>首页</span>
      </el-menu-item>

      <nav-menu-item
        v-for="(item, index) in menus.menusTree?.filter((v) =>
          useAuth().hasMenu(v.menu.key),
        )"
        :key="index"
        :data="item"
      ></nav-menu-item>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { MenuType } from '~~/types/menu.d';
import { type MenuMapItem } from '~~/utils/useMenus';

const props = defineProps(['collapse']);
defineEmits(['update:collapse', 'select']);
// const collapse = ref(true);
const route = useRoute();
const menus = useMenus();
// console.log('🚀 ~ file: nav-menu.vue:46 ~ menus:', menus.menusTree);

const active = computed(() => {
  let item = menus.currentRouteMenus[menus.currentRouteMenus.length - 1];
  while (
    item &&
    item.menu.parent &&
    menus.menuMap.get(item.menu.parent)?.menu.type === MenuType.page
  ) {
    item = <MenuMapItem>menus.menuMap.get(item.menu.parent);
  }
  return item?.menu?.key;
});
// import Color  from 'color';
</script>

<style scoped lang="scss">
.el-menu {
  // width: 200px;
  // --el-menu-width: 300px;
  // --el-menu-bg-color: #1f2937;
  --el-menu-bg-color: var(--un-color-gray-800);
  --el-menu-hover-bg-color: var(--un-color-gray-900);
  --el-menu-text-color: var(--el-bg-color-page);
  // --uno: bg-gray-800;
  border-right-width: 0;
  &:not(.el-menu--collapse) {
    width: 200px;
  }
}
.dark .el-menu {
  --el-menu-text-color: var(--el-text-color-primary);
  --el-menu-bg-color: var(--un-color-gray-900);
  --el-menu-hover-bg-color: var(--el-bg-color);
}
</style>
